<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app" style="margin:50px 100px 100px 100px">

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>账户详情</span>
                <el-button style=" padding: 3px 0" type="text" v-on:click="refreshAccount">刷新</el-button>
            </div>
            <div class="">
                <el-button type="text">资金账号：{{account.m_strAccountID}} </el-button>
                <el-button type="text">账号key：{{account.m_strAccountKey}} </el-button>
                <el-button type="text">经济公司编号：{{account.m_strBrokerID}} </el-button>
                <el-button type="text">平台类型：{{account.m_nBrokerType}} </el-button>
                <el-button type="text">平台编号：{{account.m_nPlatformID}} </el-button>
                <el-button type="text">账号类型编号：{{account.m_nAccountType}} </el-button>
                <el-button type="text">状态：{{account.m_strStatus}} </el-button>
                <el-button type="text">交易日：{{account.m_strTradingDate}} </el-button>
                <el-button type="text">冻结资金：{{account.m_dFrozenMargin}} </el-button>
                <el-button type="text">冻结手续费：{{account.m_dFrozenCommission}} </el-button>
                <el-button type="text">总资产：{{account.m_dBalance}} </el-button>
                <el-button type="text">可用资金：{{account.m_dAvailable}} </el-button>
                <el-button type="text">已用手续费：{{account.m_dCommission}} </el-button>
                <el-button type="text">持仓盈亏：{{account.m_dPositionProfit}} </el-button>
                <el-button type="text">质押：{{account.m_dMortgage}} </el-button>
                <el-button type="text">股票总市值(无期货)：{{account.m_dStockValue}} </el-button>
                <el-button type="text">债券总市值(无期货)：{{account.m_dLoanValue}} </el-button>
                <el-button type="text">基金总市值：{{account.m_dFundValue}} </el-button>
                <el-button type="text">回购总市值：{{account.m_dRepurchaseValue}} </el-button>
                <el-button type="text">净资产：{{account.m_dAssureAsset}} </el-button>
                <el-button type="text">总负债：{{account.m_dTotalDebit}} </el-button>
                <el-button type="text">登陆状态：{{account.m_iStatus}} </el-button>
            </div>
        </el-card>
        <el-divider></el-divider>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handlerMenuSelect"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-submenu index="2">
                <template slot="title">股票交易</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">融资融券交易</template>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
                <el-menu-item index="3-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">管理类请求</template>
                <el-menu-item index="login">QMT服务授权</el-menu-item>
                <el-menu-item index="sendAccountDetail">远程同步账号信息</el-menu-item>
                <el-menu-item index="account">刷新账户信息</el-menu-item>
            </el-submenu>
            <!--
            <el-menu-item index="3">其他</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">交易日志</a></el-menu-item>-->
        </el-menu>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>日志列表</span>
                <el-button style="float: right; padding: 3px 0" type="text">清空日志</el-button>
            </div>
            <div class="text item">
                {{logText}}
            </div>
        </el-card>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                name: "aa",
                name1: "bbb"
            },
            account : {} ,
            activeIndex2: "0",
            logText: "bbbbbbbbb.aaaaaaaaa",
            moduleTag: "0xFFFF1123",
            accountKey: "0x001112",
            balance: "100.00"
        },
        methods: {
            refreshAccount() {
                Api.account(this);
            },
            handlerMenuSelect( method , path ) {
                if( Api[ method ] ){
                    console.log(`Call api->${method} `)
                    Api[ method ]( this )
                }
            }
        } ,
        mounted () {
            Api.sendAccountDetail( this )
        }
    })
</script>

</html>